﻿<%@ Page Title="标签管理" Language="C#" MasterPageFile="~/Site.Admin.Master" AutoEventWireup="true" CodeBehind="Tags.aspx.cs" Inherits="WebApplication1.Admin.Tags" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h3>标签管理</h3>

    <div class="container" ng-app="myApp" ng-controller="userCtrl">
        <div class="btn-group">
            <button type="button" class="btn btn-lg btn-primary" ng-click="edited('new')">添加</button>
        </div>
        <table class="table table-hover table-striped ">
            <thead>
                <tr>
                    <th>编辑</th>
                    <th>类别Id</th>
                    <th>类别名称</th>
                    <th>URL地址</th>
                    <th>排序</th>
                    <th>上级名称</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="tag in tags">
                    <td>
                        <button type="button" class="btn" ng-click="edited(tag.TagId)">
                            <span class="glyphicon glyphicon-pencil"></span>编辑
                        </button>
                    </td>
                    <td>{{ tag.TagId }}</td>
                    <td>{{ tag.TagName }}</td>
                    <td>{{ tag.TagUrl }}</td>
                    <td>{{ tag.Sort }}</td>
                    <td>{{ tag.Parent }}</td>
                    <td>
                        <button type="button" class="btn" ng-click="delete(tag.TagId)">
                            <span class="glyphicon glyphicon-trash"></span>删除
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">{{fName}}
                        </h4>
                    </div>
                    <div class="form-horizontal">
                        
                        <div class="form-group">
                            <label for="TagId" class="col-sm-2 control-label">类别Id</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="TagId" ng-model="TagId" placeholder="类别Id" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="TagName" class="col-sm-2 control-label">类别名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="TagName" ng-model="TagName" placeholder="请输入名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="TagUrl" class="col-sm-2 control-label">URL地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="TagUrl" ng-model="TagUrl" placeholder="请输入URL地址">
                            </div>
                        </div>
                         <div class="form-group">
                            <label for="Sort" class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="Sort" ng-model="Sort" placeholder="请输入排序">
                            </div>
                        </div>
                         <div class="form-group">
                            <label for="Parent" class="col-sm-2 control-label">上级名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="Parent" ng-model="Parent">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        angular.module('myApp', []).controller('userCtrl', function ($scope,$http) {
            $scope.TagId = '';
            $scope.TagName = '';
            $scope.TagUrl = '';
            $scope.Parent = '';
            $scope.Sort = '';
            $http.get("/api/Tags").success(function (response) { $scope.tags = response; });

            //$scope.tags = [
            //{ id: 1, fName: 'Hege', lName: "Pege" },
            //{ id: 2, fName: 'Kim', lName: "Pim" },
            //{ id: 3, fName: 'Sal', lName: "Smith" },
            //{ id: 4, fName: 'Jack', lName: "Jones" },
            //{ id: 5, fName: 'John', lName: "Doe" },
            //{ id: 6, fName: 'Peter', lName: "Pan" }
            //];
            $scope.edit = true;
            $scope.error = false;
            $scope.incomplete = false;
            $scope.edited = function (id) {
                $('#myModal').modal('show');
                if (id == 'new') {
                    $scope.edit = true;
                    $scope.incomplete = true;
                    $scope.fName = 'abc';
                    $scope.lName = 'ded';
                } else {
                    $scope.edit = true;
                    $scope.incomplete = true;
                    $scope.fName = 'abc';
                    $scope.lName = 'ded';
                }
            };

            $scope.$watch('passw1', function () { $scope.test(); });
            $scope.$watch('passw2', function () { $scope.test(); });
            $scope.$watch('fName', function () { $scope.test(); });
            $scope.$watch('lName', function () { $scope.test(); });

            $scope.test = function () {
                if ($scope.passw1 !== $scope.passw2) {
                    $scope.error = true;
                } else {
                    $scope.error = false;
                }
                $scope.incomplete = false;
                if ($scope.edit && (!$scope.fName.length ||
                  !$scope.lName.length ||
                  !$scope.passw1.length || !$scope.passw2.length)) {
                    $scope.incomplete = true;
                }
            };
        })

    </script>


</asp:Content>
